<template>
  <div>
    <!--筛查-->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="供应商名称">
        <el-input v-model="queryParams.supplierName" placeholder="供应商名称"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="queryParams.supplierPhone" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="序号">
        <el-input v-model.number="queryParams.supplierNumFrom" placeholder="从"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model.number="queryParams.supplierNumTo" placeholder="到"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="queryParams.supplierState" placeholder="仓库状态" label="1">正常</el-radio>
        <el-radio v-model="queryParams.supplierState" placeholder="仓库状态" label="0">关停</el-radio>
        <el-radio v-model="queryParams.supplierState" placeholder="仓库状态" label="2">修整</el-radio>
        <el-radio v-model="queryParams.supplierState" placeholder="仓库状态" label="-1">全部</el-radio>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-plus" size="mini" @click="query">查询
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-plus" size="mini" @click="reSet">清除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addHandler()">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteHandler()">删除</el-button>
      </el-col>
    </el-row>
    <br>
    <!--查询数据-->
    <el-table
        :data="tableData"
        stripe v-loading="loading"
        style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item  label="联系人">
              <span>{{ props.row.supplierLinkPerson }}</span>
            </el-form-item >
            <el-form-item  label="电话">
              <span>{{ props.row.supplierPhone }}</span>
            </el-form-item >
            <el-form-item  label="序号">
              <span>{{ props.row.supplierNum }}</span>
            </el-form-item >
            <el-form-item  label="银行名称">
              <span>{{ props.row.bankName }}</span>
            </el-form-item  >
            <el-form-item  label="账号">
              <span>{{ props.row.bankSn }}</span>
            </el-form-item >
            <el-form-item  label="地址">
              <span>{{ props.row.supplierAddress }}</span>
            </el-form-item >
            <el-form-item  label="状态">
<!--              <span>{{ props.row.supplierState }}</span>-->
              <span>
                <el-tag v-if="props.row.supplierState==0" type="danger">停用</el-tag>
                <el-tag v-else-if="props.row.supplierState==1">正常</el-tag>
                <el-tag v-else-if="props.row.supplierState==2" type="success">修整</el-tag>
                <el-tag v-else type="info">不清楚</el-tag>
              </span>
            </el-form-item >
            <el-form-item  label="代号">
              <span>{{ props.row.supplierCode }}</span>
            </el-form-item >
            <el-form-item  label="是否入住">
<!--              <span>{{ props.row.supplierIsJoin }}</span>-->
              <span>
                <el-tag v-if="props.row.supplierIsJoin==0" type="danger">未入住</el-tag>
                <el-tag v-else-if="props.row.supplierIsJoin==1">入住</el-tag>
                <el-tag v-else type="info">不清楚</el-tag>
              </span>
            </el-form-item >
            <el-form-item  label="成立时间">
              <span>{{ formatDate(0,0,props.row.supplierFoundedDate,0) }}</span>
            </el-form-item >
            <el-form-item  label="注册资金">
              <span>{{ props.row.supplierRegisteredCapital }}</span>
            </el-form-item >
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="supplierId" label="供应商主键" width="100"></el-table-column>
      <el-table-column prop="supplierName" label="名称"></el-table-column>
      <el-table-column prop="supplierInfo" label="描述"></el-table-column>
      <el-table-column class="caoZuo" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="editHandler(scope.row.supplierId)">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteHandler(scope.row.supplierId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--弹窗页-->
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="50%"
        append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="supplierName">
              <el-input placeholder="请输入名称" v-model="form.supplierName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="supplierLinkPerson">
              <el-input placeholder="请输入联系人" v-model="form.supplierLinkPerson"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="supplierPhone">
              <el-input placeholder="请输入电话" v-model="form.supplierPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序号" prop="supplierNum">
              <el-input placeholder="请输入序号" v-model="form.supplierNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行名称" prop="bankName">
              <el-input placeholder="请输入银行名称" v-model="form.bankName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号" prop="bankSn">
              <el-input placeholder="请输入账号" v-model="form.bankSn"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地址" prop="supplierAddress">
          <el-input type="textarea" placeholder="请输入地址" v-model="form.supplierAddress"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="supplierState">
          <el-radio-group v-model="form.supplierState">
            <el-radio :label="0">关停</el-radio>
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">修整</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="代号" prop="supplierCode">
          <el-input placeholder="请输入代号" v-model="form.supplierCode"></el-input>
        </el-form-item>
        <el-form-item label="是否入住" prop="supplierIsJoin">
          <el-radio v-model="form.supplierIsJoin" :label="0">未入住</el-radio>
          <el-radio v-model="form.supplierIsJoin" :label="1">入住</el-radio>
        </el-form-item>
        <el-form-item label="描述" prop="supplierInfo">
          <el-input type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.supplierInfo"></el-input>
        </el-form-item>
        <el-form-item label="成立时间" prop="supplierFoundedDate">
          <el-date-picker v-model="form.supplierFoundedDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="注册资金" prop="supplierRegisteredCapital">
          <el-input placeholder="请输入注册资金" v-model="form.supplierRegisteredCapital"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>-

<script>
import {getPage,editPage,editSave,addSave,deleteIds} from "@/api/webshop/SupplierInfo"

export default {
  name: "Test",
  data() {
    return {
      total: 0,
      loading: false,
      StartDate: [],
      title: '',
      //用于删除的id集合
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierName: '',
        supplierPhone: '',
        supplierNumFrom: null,
        supplierNumTo: null,
        supplierState: null
      },
      form: {
        supplierId: null,
        supplierName: null,
        supplierLinkPerson: null,
        supplierPhone: null,
        supplierNum: null,
        bankName: null,
        bankSn: null,
        supplierAddress: null,
        supplierState: null,
        supplierCode: null,
        supplierIsJoin: null,
        supplierInfo: null,
        supplierFoundedDate: null,
        supplierRegisteredCapital: null
      },
      rules: {
        supplierName: [
          {required: true, message: '请输入供应商名称', trigger: 'blur'},
          {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
        ],
        supplierCode: [
          {required: true, message: '请输入供应商代号', trigger: 'blur'}
        ],
        supplierAddress: [
          {min: 0, max: 500, message: '长度在 0 到 500 个字符', trigger: 'blur'}
        ],
        supplierInfo: [
          {min: 0, max: 500, message: '长度在 0 到 500 个字符', trigger: 'blur'}
        ],
      },
      dialogVisible: false,
      formLabelWidth: '120px',
      tableData: [],
    }
  },
  created() {
    this.getList()

  },
  methods: {
    /**
     * 获取数据
     */
    getList() {
      this.loading = true
      // 写请求
      getPage(this.queryParams).then(resp => {
        // console.log(resp.data.rows)
        this.tableData = resp.rows
        this.loading = false
        this.total = resp.total
      })
    },
    /**
     * 清空表单
     */
    resetForm() {
      this.form = {
        supplierName: null,
        supplierPhone: null,
        supplierNumFrom: null,
        supplierNumTo: null,
        supplierState: 1
      }
    },
    /**
     * 打开添加 对话框
     */
    addHandler() {
      this.resetForm()
      this.title = '添加信息'
      this.dialogVisible = true
    },
    /**
     * 打开修改 对话框
     */
    editHandler(id) {
      // console.log(id)
      editPage(id).then(resp => {
        this.form = resp.data
        this.title = '修改信息'
        this.dialogVisible = true
      })
    }, /**
     * 添加保存处理
     */
    onSubmit() {
      // 通过选择器找到form表单进行处理
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //通过了校验
          if (this.form.supplierId) {
            // 修改
            // axios处理传值进行添加处理
            editSave(this.form).then(resp => {
              //判断成功还是失败,给予明确提示
              if (resp.code == 200) {
                //弹出成功消息
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                // 关闭显示窗
                this.dialogVisible = false
                // 刷新页面
                this.getList()
              } else {
                // 弹出失败消息
                this.$message.error('保存失败');
              }
            })
          } else {
            // 添加
            // axios处理传值进行添加处理
            addSave(this.form).then(resp => {
              //判断成功还是失败,给予明确提示
              if (resp.code == 200) {
                //弹出成功消息
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                // 关闭显示窗
                this.dialogVisible = false
                // 刷新页面
                this.getList()
              } else {
                // 弹出失败消息
                this.$message.error('保存失败');
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }


      });
    },
    /**
     * 删除处理
     * @param id
     */
    deleteHandler(id) {
      console.log(id)
      //判断传入的是单条操作还是多选操作
      let idss = id || this.ids.join(',')
      // axios处理传值进行删除处理
      deleteIds(idss).then(resp => {
        //判断成功还是失败
        if (resp.code == 200) {
          //弹出成功消息
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          // 刷新页面
          this.getList()
        } else {
          // 弹出失败消息
          this.$message.error('删除失败');
        }
      }).catch(err => {
        // 发生异常时,弹出异常消息
        this.$message.error('删除异常');
      })
    },
    /**
     *     多选 选中处理
     */
    handleSelectionChange(val) {
      console.log(val)
      this.ids = val.map(item => item.supplierId)
      console.log(this.ids)
    },
    /**
     * 时间格式化
     * @param row
     * @param column
     * @param cellValve
     * @param index
     * @returns {string}
     */
    formatDate(row, column, cellValve, index) {
      // console.log(row, column,cellValve,index)
      let date = new Date(cellValve);
      let o = {
        'y': date.getFullYear(),
        'm': (date.getMonth() + 1).toString().padStart(2, '0'),
        'd': date.getDate().toString().padStart(2, '0'),
        'h': date.getHours().toString().padStart(2, '0'),
        'i': date.getMinutes().toString().padStart(2, '0'),
        's': date.getSeconds().toString().padStart(2, '0')
      };
      return o.y + "-" + o.m + "-" + o.d
    },
    /**
     * 分页处理 显示条数改变事件
     * @param val
     */
    handleSizeChange(val) {
      // console.log(val)
      this.queryParams.pageSize = val
      this.getList()
    },
    /**
     * 分页处理 当前页改变事件
     * @param val
     */
    handleCurrentChange(val) {
      // console.log(val)
      this.queryParams.pageNum = val
      this.getList()
    },
    /**
     * 查询处理
     */
    query() {
      this.getList()
    },
    reSet() {
      this.queryParams.supplierName = ''
      this.queryParams.supplierPhone = ''
      this.queryParams.supplierNumFrom = null
      this.queryParams.supplierNumTo = null
      this.queryParams.supplierState = null
    },

  }
}
</script>

<style scoped lang="scss">
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-form {
  margin: 20px auto;
  width: 90%;
  text-align: left;
}
</style>
